<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>PDF阅读器</title>

<link rel="stylesheet" href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css"/>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.js"></script>

<script type="text/javascript" src="http://61.155.66.169:7001/lib/pdfjs/build/pdf.js"></script>

<script type="text/javascript">
'use strict';

var numPage = 1,
	scale = 1.5,
	pdf = null;

function stopDefault( e ) {
	if ( e && e.preventDefault )
		e.preventDefault();
	else
		window.event.returnValue = false;
	return false;
}
function parseOutline(outline,indent=''){
	for(var i=0;i<outline.length;i++){
		var line = outline[i];
		$('#mulu .menu').append('<a class="item" num='+line.dest[0].num+' gen='+line.dest[0].gen+'>'+indent+line.title+'</a>');
		if (outline[i].items.length>0)
			parseOutline(outline[i].items,indent + '　');
	}
}
function renderToc(outline){
	$('#mulu .menu').html('');
	if (!outline) return;
	if (outline.length>0) {
		$('#mulu').show();
		parseOutline(outline);
	} else {
		$('#mulu').hide();
	}
	$('#mulu .menu a.item').click(function(){
		var num = parseInt($(this).attr('num')),
			gen = parseInt($(this).attr('gen'));
		pdf.getPageIndex({num:num,gen:gen}).then(function (pageIndex) {
			renderPage(pageIndex+1);
		});
	});
}
function renderPage(p,s){
	if (!pdf) return;
	if (p<1 || p>pdf.numPages) return;
	numPage = p;
	if (s == null) s = scale;
	if (s<0.5 || s>4) s = 1.5;
	scale = s;
	pdf.getPage(p).then(function (page) {
		//$('#tips').html(p + '/' + pdf.numPages);
		$('#numPage').val(p);
		$('#totalPage').html(pdf.numPages);
		var viewport = page.getViewport(scale);

		var canvas = document.getElementById('the-canvas');
		var context = canvas.getContext('2d');
		canvas.height = viewport.height;
		canvas.width = viewport.width;

		var renderContext = {
			canvasContext: context,
			viewport: viewport
		};
		page.render(renderContext);
	});
}
$(function(){
	if (window == top) $('#fullscreen').hide();
	$('#fullscreen').click(function(){
		if (window != top)
			top.location.href = location.href;
	});
	$('#prev').click(function(){
		renderPage(numPage-1,scale);
	});
	$('#next').click(function(){
		renderPage(numPage+1,scale);
	});
	$('#zoom_minus').click(function(){
		renderPage(numPage,scale-0.1);
	});
	$('#zoom_plus').click(function(){
		renderPage(numPage,scale+0.1);
	});
	$('#numPage').on('keypress',function(e){
		if (e.keyCode == 13){
			numPage = parseInt($('#numPage').val());
			renderPage(numPage,scale);
		}
	});
	$(document).on('keyup',function(e){
		if ($('#numPage:focus').length) return;
		switch(e.keyCode){
			case 39:
				renderPage(numPage+1,scale);
				stopDefault(e);
				break;
			case 37:
				renderPage(numPage-1,scale);
				stopDefault(e);
				break;
			case 32:
				renderPage(numPage+1,scale);
				stopDefault(e);
				break;
			case 8:
				renderPage(numPage-1,scale);
				stopDefault(e);
				break;
		}
	});
	PDFJS.getDocument(location.hash.slice(1)).then(function (_pdf) {
		pdf = _pdf;
		pdf.getOutline().then(renderToc);
		renderPage(numPage);
	});
});
</script>
</head>

<body>
	<div class="ui menu fixed" style="border-radius:0 !important">
		<a id="prev" class="item">上一页</a>
		<a id="next" class="item">下一页</a>
		<div id="tips" class="item ui transparent input">
			<input type="text" id="numPage" style="width:20px;text-align:right" />/<label id="totalPage"></label>
		</div>
		<a id="zoom_minus" class="icon item"><i class="icon medium zoom out"></i></a>
		<a id="zoom_plus" class="icon item"><i class="icon zoom large"></i></a>
		<div class="ui dropdown simple item" id="mulu" style="display:none">
			<div class="text">目录</div>
			<i class="icon dropdown"></i>
			<div class="menu">
			</div>
		</div>
		<a id="fullscreen" class="icon item"><i class="icon large tv"></i></a>
	</div>
	<canvas id="the-canvas" style="padding-top:45px" />
</body>

</html>
